<template>
  <div>
    <div class="table">
      <div class="actions" v-if="action.length > 0">
        <div
          v-for="item in actions"
          :key="item.label"
          @click="handleAction(item.label)"
          class="actions-content"
        >
          <div v-if="item.label != '导入'">
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </div>
          <div v-else>
            <el-upload
              action="/"
              ref="upload"
              accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              :before-upload="handleUpload"
            >
              <i class="iconfont" :class="item.icon"></i>
              <span>{{ item.label }}</span>
            </el-upload>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData.data"
        :height="height"
        style="width: 100%"
        stripe
        border
        v-loading="loading"
        element-loading-text="我知道你很急,但你先别急"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
          v-if="isShowIndex"
        ></el-table-column>

        <el-table-column
          type="selection"
          width="55"
          v-if="isShowSelection"
          :selectable="checkSelectable"
        ></el-table-column>

        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          v-if="!item.isHidden"
          :label="item.title"
          :width="item.width || '180'"
          :align="item.align || 'center'"
        >
          <template slot-scope="{ row }">
            <div v-if="item.btns" class="btns-all">
              <span
                v-for="(element, index) in item.btns"
                :key="index"
                @click="btnClick(element, row)"
              >
                {{ element }}
              </span>
            </div>
            <div v-else-if="item.slot">
              <slot :name="item.slot" :row="row"></slot>
            </div>
            <div v-else-if="item.tooltip">
              <el-tooltip placement="top-start" :visible-arrow="false">
                <template v-slot:content>
                  <div v-html="row[item.porp || item.key]"></div>
                </template>
                <span class="" v-html="row[item.prop || item.key]"></span>
              </el-tooltip>
            </div>
            <div v-else>
              <span class="" v-html="row[item.prop || item.key]"></span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      v-if="tableData.data && tableData.data.length > 0 && isShowPagination"
      class="page"
    >
      <div class="totalInfo">
        <span>总数{{ tableData.total }}条</span>
        <span>总页数{{ Math.ceil(tableData.total / pageInfo.pageSize) }}</span>
        <span>当前{{ pageInfo.currentPage }}页</span>
      </div>
      <el-pagination
        :total="tableData.total"
        :current-page.sync="pageInfo.currentPage"
        :page-size="pageInfo.pageSize"
        background
        @current-change="onPageChange($event, 'page')"
        layout="prev, pager, next, sizes, jumper"
        @size-change="onPageChanged($event, 'size')"
      ></el-pagination>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "comTable",
  props: {
    //表头按钮
    actions: {
      type: Array,
      default: () => [],
    },
    //表格高度
    height: {
      type: Number,
      default: 600,
    },
    //表格数据
    tableData: {
      type: Object,
      default: () => {
        return {
          data: [],
          total: 0,
        };
      },
    },
  },
  data() {
    return {
      //加载
      loading: false,
    };
  },
  methods: {
    checkSelectable(row, index) {},
    handleSelectionChange() {},
  },
};
</script>
 
<style lang="less" scoped>
</style>